<template>
    <div>

        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>培训管理</el-breadcrumb-item>
            <el-breadcrumb-item>培训实施</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输如课程名称" clearable v-model="name" @clear="searchImple">
                        <el-button slot="append" icon="el-icon-search" @click="searchImple"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="addDialogVisible=true">实施添加</el-button>
                </el-col>
            </el-row>



            <el-table :data="ImplementList" border stripe>
                <el-table-column label="培训ID" width="80" prop="id"></el-table-column>
                <el-table-column label="实施日期" prop="implementationDate"></el-table-column>
                <el-table-column label="所属组织" prop="organization"></el-table-column>
                <el-table-column label="培训地点" prop="location"></el-table-column>
                <el-table-column label="培训课时"  width="80" prop="courseHours"></el-table-column>
                <el-table-column label="课程名称" prop="courseName"></el-table-column>

                <el-table-column label="课程ID" width="80" prop="courseId"></el-table-column>
                <el-table-column label="讲师ID" width="80" prop="trainerId"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="showDialog(scope.row)">修改</el-button>
                        <el-button type="danger" size="mini" @click="removeById(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[2, 4 , 8, 16]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>
        </el-card>



        <!--添加-->
        <el-dialog title="实施添加" :visible.sync="addDialogVisible" width="50%">
            <el-form
                    :model="addForm"
                    :rules="addFormRules"
                    ref="addFormRef"
                    label-width="100px"
                    class="demo-ruleForm"
            >
                <el-form-item label="培训ID" prop="id">
                    <el-input v-model="addForm.id"></el-input>
                </el-form-item>
                <el-form-item label="实施日期" prop="implementationDate">
                    <el-date-picker
                            v-model="addForm.implementationDate"
                            type="datetime"
                            placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="所属组织" prop="organization">
                    <el-input v-model="addForm.organization"></el-input>
                </el-form-item>
                <el-form-item label="培训地点" prop="location">
                    <el-input v-model="addForm.location"></el-input>
                </el-form-item>
                <el-form-item label="培训课时" prop="courseHours">
                    <el-input v-model="addForm.courseHours"></el-input>
                </el-form-item>
                <el-form-item label="课程名称" prop="courseName">
                    <el-input v-model="addForm.courseName"></el-input>
                </el-form-item>
                <el-form-item label="课程ID" prop="courseId">
                    <el-input v-model="addForm.courseId"></el-input>
                </el-form-item>
                <el-form-item label="讲师ID" prop="trainerId">
                    <el-input v-model="addForm.trainerId"></el-input>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addImplement">确 定</el-button>
                <el-button @click="canceladd">取 消</el-button>
            </span>
        </el-dialog>

        <!--修改-->
        <el-dialog
                title="实施修改"
                :visible.sync="editDialogVisible"
                width="50%"
                @close="editFormClose"
                :close-on-click-modal="false"
                ref="editFormRef"
        >
            <el-form
                    :model="editForm"
                    :rules="editFormRules"
                    ref="editFormRef"
                    label-width="100px"
                    class="demo-ruleForm"
            >
                <el-form-item label="实施日期" prop="implementationDate">
                    <el-date-picker
                            v-model="editForm.implementationDate"
                            type="datetime"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="所属组织" prop="organization">
                    <el-input v-model="editForm.organization"></el-input>
                </el-form-item>
                <el-form-item label="培训地点" prop="location">
                    <el-input v-model="editForm.location"></el-input>
                </el-form-item>
                <el-form-item label="培训课时" prop="courseHours">
                    <el-input v-model="editForm.courseHours"></el-input>
                </el-form-item>
                <el-form-item label="课程名称" prop="courseName">
                    <el-input v-model="editForm.courseName"></el-input>
                </el-form-item>
                <el-form-item label="课程ID" prop="courseId">
                    <el-input v-model="editForm.courseId"></el-input>
                </el-form-item>
                <el-form-item label="讲师ID" prop="trainerId">
                    <el-input v-model="editForm.trainerId"></el-input>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="editImplement">确 定</el-button>
                <el-button @click="cancelEdit">取 消</el-button>
            </span>
        </el-dialog>


    </div>


</template>

<script>
    export default {
        name: "Implement",
        data(){
            return{
                editFormRules:{},
                editForm:{
                    id:-1,
                    implementationDate:'',
                    organization:'',
                    location:'',
                    courseHours:'',
                    courseName:'',
                    courseId:'',
                    trainerId:'',


                },



                addForm:{
                        id:'',
                        implementationDate:'',
                        organization:'',
                        location:'',
                        courseHours:'',
                        courseName:'',
                        courseId:'',
                        trainerId:'',

                },
                addFormRules:{
                    id:[
                        {required:true,message:"id不能为空",trigger:"blur"}
                    ],
                    implementationDate:[
                        {required:true,message:"实施日期不能为空",trigger:"blur"}
                    ],
                    organization:[
                        {required:true,message:"所属组织不能为空",trigger:"blur"}
                    ],
                    location:[
                        {required:true,message:"培训地点不能为空",trigger:"blur"}
                    ],
                    courseHours:[
                        {required:true,message:"培训课时不能为空",trigger:"blur"}
                    ],
                    courseName:[
                        {required:true,message:"课程名称不能为空",trigger:"blur"}
                    ],
                    courseId:[
                        {required:true,message:"课程ID不能为空",trigger:"blur"}
                    ],
                    trainerId:[
                        {required:true,message:"讲师ID不能为空",trigger:"blur"}
                    ],
                },

                addDialogVisible: false,
                editDialogVisible: false,

                pageNum: 1,
                pageSize: 2,
                name: "",
                ImplementList: [],
                total: 0,
            }
        },
        methods:{

            //取消添加
            canceladd(){
                this.addForm={};
                this.addDialogVisible=false;
            },
            //添加
            addImplement() {
                this.$refs.addFormRef.validate(valid=>{
                    if (valid) {
                        let url = this.$HRMSUrl+"/implementation/add";
                        this.$axios.post(url,this.addForm)
                            .then(res=>{
                                if (res.data.code == 200){
                                    this.addDialogVisible = false;
                                    this.addForm = {};
                                    this.getImplementList()

                                }else {
                                    this.$message({
                                        type:"error",
                                        message:res.data.msg,
                                        duration:1000
                                    })
                                }
                            })
                    }else {
                        return false ;
                    }
                })

            },

            // 修改
            editImplement() {
                this.$refs.editFormRef.validate(valid=>{
                    if (valid){
                        let url = this.$HRMSUrl+"/implementation/modify"
                        this.$axios.put(url,this.editForm)
                            .then(res=>{
                                if (res.data.code == 200){
                                    this.getImplementList();
                                    this.editDialogVisible = false ;
                                }else {
                                    this.$message({
                                        type:"error",
                                        message:res.data.msg,
                                        duration:1000
                                    })
                                }
                            })
                    }else {
                        return false
                    }
                })
            },

            editFormClose() {
                this.$refs.editFormRef.resetFields();
            },

            cancelEdit(){
                this.$refs.editFormRef.resetFields();
                this.editDialogVisible = false;
            },
            //反显数据
            showDialog(row){
                this.editDialogVisible=true;
                this.editForm.id=row.id;
                this.editForm.implementationDate=row.implementationDate;
                this.editForm.organization=row.organization;
                this.editForm.location=row.location;
                this.editForm.courseHours=row.courseHours;
                this.editForm.courseName=row.courseName;
                this.editForm.courseId=row.courseId;
                this.editForm.trainerId=row.trainerId;

            },
            //删除
            removeById(id){
                let url = this.$HRMSUrl+"/implementation/del/"+id;
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.delete(url)
                        .then(res=>{
                            if (res.data.code == 200){
                                this.getImplementList();
                            }else {
                                this.$message({
                                    type:"error",
                                    message:res.data.msg,
                                    duration:1000
                                })
                            }
                        })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },

            //初始化数据
            getImplementList() {
                let url = this.$HRMSUrl+"/implementation/implementationList";
                this.$axios.get(url,{
                    params:{
                        name:this.name,
                        now:this.pageNum,
                        size:this.pageSize
                    }
                }).then(res=>{
                    if (res.data.code == 200){
                        this.ImplementList = res.data.data.list;
                        this.pageNum = res.data.data.pageNum;
                        this.pageSize = res.data.data.pageSize;
                        this.total = res.data.data.total;
                    }else {
                        this.$message({
                            type:"error",
                            message:res.data.msg,
                            duration:1000
                        })
                    }
                })
            },
            searchImple() {
                this.getImplementList();
            },
            handleSizeChange(newSize) {
                this.pageSize = newSize;
                this.getImplementList();
            },
            handleCurrentChange(newPage) {
                this.pageNum = newPage;
                this.getImplementList();
            },

        },
        created(){
            this.searchImple()
        }




    }
</script>

<style scoped>

</style>